<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css"  media="all">
  <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
  <link rel="stylesheet" href="__CSS__/admin.css"  media="all">

</head>
<style>

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }
</style>
<body>
<div style="margin-top: 20px;">
</div>

<form class="layui-form" id="admin">


  <div  id="classifybox">

    <div class="layui-form-item" >
      <label class="layui-form-label">服务名</label>
      <div class="layui-input-inline person" style="width: 400px">
        <div class="layui-input-inline" style="width: 400px;padding-bottom: 15px">

          {empty name="data"}
          <input type="hidden" id="classifyid" value="0">
          <input id="title"  name="specs_name" value=""  placeholder="服务名称" autocomplete="off" class="layui-input" type="text">
          {else /}
          <input type="hidden" id="classifyid" value="{$data['id']}">
          <input id="title"  name="specs_name" value="{$data['title']}"  placeholder="服务名称" autocomplete="off" class="layui-input" type="text">
          {/empty}

        </div>
      </div>
    </div>

    <!--<input class="layui-input" value="1" style="margin-bottom: 20px" id="chosenum" min="0" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" type="number">-->

    <!-- 可选数量 暂未用到，隐藏-->
    <div class="layui-form-item classifychild" >
      <label class="layui-form-label">服务类型</label>
      <div class="layui-input-inline person" style="width: 400px">
        <div class="layui-input-inline" style="width: 400px;padding-bottom: 15px">
          {empty name="data"}
          <div style="margin-bottom: 20px">
            <input type="radio"  name="customtype" value="1"  checked title="个人定制" >
            <input type="radio"   name="customtype" value="2"  title="企业定制" >
          </div>
          {else /}
          <div style="margin-bottom: 20px">
            <input type="radio"  lay-filter="customtype" name="customtype" value="1"  {if($data.customtype == 1)}checked{/if} title="个人定制" >
            <input type="radio"  lay-filter="customtype" name="customtype" value="2" {if($data.customtype == 2)}checked{/if} title="企业定制" >
          </div>
          {volist name="data.son" id="vo"}
          <div class="layui-form-item personchild">
            <input type="hidden" name="person_id" id="person_id" value="{$vo.id}">
            <div class=" layui-col-xs3">
              <input name="person_name" value="{$vo.title}"  placeholder="" autocomplete="off" class="layui-input layui-col-xs5" type="text" lay-key="2">
            </div>
            <div class=" layui-col-xs2">
              <span  class="layui-btn layui-btn-danger layui-btn-sm delperson" style="margin-top: 4px">删除<i class="layui-icon"></i></span>
            </div>
          </div>
          {/volist}

          {/empty}



        </div>
        <span  class="layui-btn  layui-btn-sm addperson" style="margin-top: 4px">新增选项</span>
      </div>


    </div>

  </div>

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="admin">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>

</form>

<script src="__PUBLIC__/layui/layui.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
<script>
    var message;
    layui.config({
        base: '__JS__/',
        version: '1.0.1'
    }).use(['app', 'message'], function() {
        var app = layui.app,
            $ = layui.jquery,
            layer = layui.layer;
        //将message设置为全局以便子页面调用
        message = layui.message;
        //主入口
        app.set({
            type: 'iframe'
        }).init();
    });
</script>


<script>


    $(document).on("click",".delperson",function () {
        var child=$(this).parent().parent();
        child.remove();
    })

    $(document).on("click",".addperson",function () {
        var html='        <div class="layui-form-item personchild">\n' +
            '          <div class=" layui-col-xs3">\n' +
            '            <input name="person_name" value=""  placeholder="服务选项" autocomplete="off" class="layui-input layui-col-xs5" type="text" lay-key="2">\n' +
            '          </div>\n' +
            '          <div class=" layui-col-xs2">\n' +
            '            <span  class="layui-btn layui-btn-danger layui-btn-sm delperson" style="margin-top: 4px">删除<i class="layui-icon"></i></span>\n' +
            '          </div>\n' +
            '        </div>';
        $(this).prev().append(html);
    })



    layui.use(['layer', 'form'], function() {

        var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form;
        form.on('submit(admin)', function (data) {

            var id=$("#classifyid").val();
            var customtype=$('input:radio[name="customtype"]:checked').val()
            var data=[];
            var classifychild=$(".classifychild");
            var personchild=$(classifychild[0]).find(".personchild");
            for(var k=0;k<personchild.length;k++){
                var datass={};
                var person_id=$(personchild[k]).find("input[name=person_id]").val();
                if(person_id){
                    datass.person_id=person_id;
                }
                datass.person_name=$(personchild[k]).find("input[name=person_name]").val();

                data.push(datass);

            }
            var title=$('#title').val();


            $.ajax({
                url: "{:url('admin/custom/addconfig')}",
                data: {
                    id:id,
                    title:title,
                    customtype:customtype,
                    data:data
                },
                type: 'post',
                async: false,
                success: function (res) {
                    layer.msg(res.msg);
                    if (res.code == 1) {
                        setTimeout(function () {
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                        }, 1500)
                    }
                }
            })
            return false;
        })
    });



</script>
</body>
</html>
